<template>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="id"
        label="id"
        width="180">
    </el-table-column>
    <el-table-column
        prop="content"
        label="内容"
        width="280">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态"
        width="180">
      <template #default="scope">
        <el-tag size="medium" :type="getTagType(scope.row)">{{ getTagName(scope.row) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        label="操作">
      <template #default="scope">
        <el-button v-show="scope.row.status === 'will'" @click="changeStatus(scope.row)" type="text" size="small">开始
        </el-button>
        <el-button v-show="scope.row.status === 'doing'" @click="changeStatus(scope.row)" type="text" size="small">完成
        </el-button>
        <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script lang="ts">
import {defineComponent} from "vue";
import {getStatusInfo, TodoItem, TodoStatus} from "@/TodoPage/DataTypes";
import {IUseTodo, useTodo} from "@/TodoPage/useTodo";
import {ElMessage} from "element-plus";


export default defineComponent({
  name: "TodoList",

  setup: function () {


    const viewModel: IUseTodo = useTodo()

    const tableData: TodoItem[] = viewModel.getList()

    function handleDel(row: TodoItem) {
      if (row.status === TodoStatus.DOING) {
        ElMessage.warning({
          message: '正在执行的事件，不能被删除',
          type: 'warning'
        });
      }else {
        viewModel.delById(row.id)
      }

    }


    function getTagName(row: TodoItem): string {
      return getStatusInfo(row.status);
    }


    function changeStatus(row: TodoItem): void {
      if (row.status === TodoStatus.WILL) {
        row.status = TodoStatus.DOING;

      } else if (row.status === TodoStatus.DOING) {
        row.status = TodoStatus.FINISH;

      }

      viewModel.update(row)

    }

    function getTagType(row: TodoItem) {
      return viewModel.getTagType(row);
    }


    return {
      tableData,
      handleDel,
      getTagName,
      getTagType,
      changeStatus
    }
  }
})
</script>

<style scoped>

</style>
